<!-- 个人名片 -->
<template>
	<view class="containers">
		<!-- <topBar :title="titleName" /> -->
		<view class="main_content">
			<!-- 没有名片 -->
			<!-- <view class="userCard" v-if="userCard == null">
      </view> -->
			<!-- 有名片 -->
			<view class="userCard" v-if="userCard != null" @tap="goAddCard(userCard.id)">
				<view class="userInfo">
					<view class="user_portrait">
						<image :src="$imgUrl + userCard.avatar" mode="" v-if="userCard.avatar"></image>
						<image src="../../static/userCard/editCard.png" mode="" v-else></image>
						<view class="message">
							<span class="company_name">{{userCard.companyName&&userCard.companyName.length>15?userCard.companyName.substring(0,14)+'...':userCard.companyName}}</span>
							<view class="person">
								<span class="name">{{userCard.name?userCard.name:"姓名：未填写"}}</span>
								<span class="position">{{userCard.position}}</span>
							</view>
							<span class="synopsis">{{userCard.synopsis?userCard.synopsis:'个人简介：未填写'}}</span>
						</view>
					</view>
					<view class="goto">
						<image src="../../static/userCard/go.png" mode=""></image>
					</view>
				</view>
				<!-- 用户地址 -->
				<view class="user_address">
					<view class="userphone">
						<span>
							<image src="../../static/userCard/phone.png" mode=""></image><text>{{userCard.phoneNumber ?userCard.phoneNumber:'联系方式：未填写'}}</text>
						</span><span>
							<image src="../../static/userCard/envelope.png" mode=""><text>{{userCard.email?userCard.email:'未填写'}}</text>
						</span>
					</view>
					<view class="address">
						<image src="../../static/userCard/location.png" mode="" /><text>{{userCard.companyAddress?userCard.companyAddress:'未填写'}}</text>
					</view>
				</view>
			</view>
			<view class="information">
				<view class="information_item">
					<image src="../../static/userCard/popularity.png" mode="" class=".item" />
					<span>人气</span>
					<span class="num" v-if="userCard != null">{{userCard.popularityNumber}}</span>
				</view>
				<view class="information_item">
					<image src="../../static/userCard/collect.png" mode="" class=".item" />
					<span>收藏</span>
					<span class="num" v-if="userCard != null">{{userCard.collectionNumber}}</span>
				</view>
				<view class="information_item">
					<image src="../../static/userCard/share.png" mode="" class=".item" />
					<span>分享</span>
					<span class="num" v-if="userCard != null">{{userCard.shareNumber}}</span>
				</view>
			</view>
			<view class="userOption">
				<view class="generate" @tap="generateImage">
					生成图片分享
				</view>
			</view>
			<view class="perfectInfo" v-if="userCard != null" @tap="goAddCard(userCard.id)">
				<image src="../../static/userCard/pedding.png" mode="" />
				完成度{{userCard.infoDegreeOfCompletion || 0}}%,立即完善
			</view>
		</view>
		<Festival></Festival>
	</view>
</template>

<script>
	import topBar from "../../components/topBar.vue";
	import wx from 'jweixin-npm'
	import { imgUrl } from "@/util/api.js";
	import {
		isWeixin,
		wxShareConfig
	} from "util/wx.js"
	export default {
		components: {
			topBar,
		},
		data() {
			return {
				titleName: "名片",
				userCard: {},
				imgUrl: imgUrl
			};
		},
		created() {
			this.getuserCard()
		},
		methods: {
			// 点击生成名片
			generateImage() {
				uni.navigateTo({
					url: '/pages/person/card_QR-code?id=' + this.userCard.id
				})
			},
			// 获取用户名片
			getuserCard() {
				let that = this
				this.$get("/bmj-api/api/ums/umsBusinessCard/queryMyBusinessCard").then(res => {
					if (res.code == 200 && res.result != null) {
						// 有名片
						this.userCard = res.result
						if (this.userCard.id) {
							if (isWeixin()) {
								this.initShareConfig()
							}
						}
					} else {
						// 没有名片
						uni.redirectTo({
							url: '/pages/person/noCard'
						});
					}
				})
			},
			// 点击去到编辑卡片页面(有内容的编辑)
			goAddCard(id) {
				uni.navigateTo({
					url: "/pages/person/editCard?id=" + id + '&isEdit=1'
				});
			},
			// 发送名片
			sendCard(id) {

			},
			initShareConfig() {
				let _this = this
				let windowurl = window.location.href.split('#')[0];
				uni.request({
					url: 'https://oldm.51bmj.cn/WeiXin/GetClientSign', //仅为示例，并非真实接口地址。
					data: {
						rawUrl: windowurl
					},
					dataType: "json",
					header: {
						'X-Requested-With': 'XMLHttpRequest'
					},
					method: "GET",
					success: (res) => {
						if (res.statusCode == 200) {
							let {
								data
							} = res
							let shareInfo = {
								title: _this.userCard.name + '的名片',
								desc: '政策尽知 红利尽享',
								link: window.location.href.replace('personCard', 'modified') + "?id=" + _this.userCard.id
							}
							wxShareConfig(this.$wx, data, shareInfo)
						}
					}
				});
			}
		}
	};
</script>
<style lang="less" scoped>
	.main_content {
		height: calc(100vh - 88rpx);
		background-color: #fff;
		border-top: 1rpx solid #ccc;
		padding: 38rpx 28rpx;

		.userCard {
			border-radius: 10rpx;
			width: 690rpx;
			height: 385rpx;
			padding: 0 40rpx;
			background-size: contain;
			background-image: url(../../static/userCard/card_bg.png);

			.userInfo {
				padding: 40rpx 0rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.user_portrait {
					display: flex;
					align-items: center;

					image {
						width: 120rpx;
						height: 120rpx;
					}

					.message {
						margin-left: 20rpx;

						.company_name {
							color: #aaaaaa;
							font-size: 22rpx;
						}

						.person {
							.name {
								color: #1f7dff;
								font-size: 36rpx;
							}

							.position {
								color: #6e6e6f;
								margin-left: 30rpx;
							}
						}

						.synopsis {
							color: #aaaaaa;
							font-size: 24rpx;
						}
					}
				}

				.goto {
					image {
						width: 16rpx;
						height: 24rpx;
					}
				}
			}

			.user_address {
				.userphone {
					span {
						color: #333333;
						font-size: 20rpx;
						margin-right: 30rpx;

						image {
							margin-right: 30rpx;
							width: 18rpx;
							height: 22rpx;
						}
					}
				}

				.address {
					color: #333333;
					font-size: 24rpx;

					image {

						margin-right: 20rpx;
						width: 18rpx;
						height: 22rpx;
					}
				}
			}
		}

		.information {
			height: 200rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.information_item {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 100rpx;
					height: 100rpx;
				}

				span {
					font-size: 20rpx;
					color: #333333;
					margin-top: 12rpx;

					&.num {
						position: absolute;
						right: -20rpx;
						top: -10rpx;
						background-color: #F64747;
						color: #fff;
						padding: 0rpx 20rpx;
						border-radius: 30rpx;
					}
				}
			}
		}

		.userOption {
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 30rpx;
			margin: 100rpx 0;
			text-align: center;

			.generate {
				width: 100%;
				line-height: 88rpx;
				height: 88rpx;
				background-color: #1678ff;
				color: #fff;
			}

			.send {
				position: relative;
				color: #1678FF;
				line-height: 88rpx;
				width: 240rpx;
				height: 88rpx;
				border: 1rpx solid #ccc;

				button {
					position: absolute;
					left: 0;
					top: 15rpx;
					width: 100%;
					opacity: 0;
				}
			}
		}

		.perfectInfo {
			position: absolute;
			display: flex;
			align-items: center;
			bottom: 20rpx;
			left: 20rpx;
			width: 360rpx;
			height: 80rpx;
			background-size: cover;
			background-color: #fff6ef;
			border-radius: 90rpx;
			color: #ff9e7d;
			font-size: 28rpx;

			image {
				margin: 0 20rpx;
				width: 36rpx;
				height: 36rpx;
			}
		}
	}
</style>
